{extend name="public:layout" /}
{block name='title'}商务圈{/block}
{block name='head'}
<link rel="stylesheet" href="/public/plugins/emoji/lib/css/jquery.mCustomScrollbar.min.css"/>
<link rel="stylesheet" href="/public/plugins/swiper/css/swiper.css"/>
<link rel="stylesheet" href="/public/plugins/emoji/dist/css/jquery.emoji.css"/>
<link rel="stylesheet" href="/public/plugins/dropload/dropload.css">
<style>
    .topbar {
        background: #333;
        color: #fff;
        padding: 10px 8px 6px 8px;
    }
    .swiper-container{z-index:0;}
    .weui-photo-browser-modal.weui-photo-browser-modal-visible{z-index:999999999;}
    .ovfHiden{overflow: hidden;height: 100%;}
</style>
<style>
</style>
{/block}
{block name="body"}
<div class="circleinfo-head">
    <a href="javascript:;" class="publish">
        <span class="iconfont icon-xiangji"></span>
    </a>
</div>
<div class="circleinfo-menu">
    <div class="weui-navbar">
        <div class="weui-navbar__item weui_bar__item_on" id="screen">
            我的圈子<span class="iconfont icon-sanjiaojiantoutriangular"></span>
        </div>
        <div class="weui-navbar__item">
            <a href="{:url('MyCircle/contacts')}">
                通讯录
            </a>
        </div>
    </div>
    <div class="screen-box">
            {empty name="circles"}
            <div class="weui-loadmore weui-loadmore_line">
                <span class="weui-loadmore__tips">暂无数据</span>
            </div>
            {else}
            <div class="weui-cells weui-cells_checkbox">
                <form action="" id="circles">
                    {volist name="circles" id="vo"}
                    <label class="weui-cell weui-check__label" for="{$vo.circle_id}">
                        <div class="weui-cell__hd">
                            <input type="checkbox" class="weui-check" name="circles[]" id="{$vo.circle_id}" value="{$vo.circle_id}" {notempty name="query.circle_ids"} {in name="vo.circle_id" value="$query.circle_ids"}  checked="checked" {/in} {else}   checked="checked" {/notempty}>
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                            <p>{$vo.circle_name}</p>
                        </div>
                    </label>
                    {/volist}
                </form>
            </div>
            <div class="weui-flex">
                <div class="weui-flex__item" style="padding:10px;">
                    <a href="javascript:;" class="weui-btn weui-btn_primary" style="border-radius:0;" onclick="setCircles()">确定</a>
                </div>
                <div class="weui-flex__item" style="padding:10px;">
                    <a href="javascript:;" class="weui-btn weui-btn_warn" style="border-radius:0;" onclick="$('.screen-box').hide()">取消</a>
                </div>
            </div>
            {/empty}
    </div>
</div>
<div class="swiper-container circle-info-type">
    <div class="swiper-wrapper">
        <div class="swiper-slide item active"  onclick="setType(-1,this)">全部</div>
        <div class="swiper-slide item" onclick="setType(0,this)">图文</div>
        <div class="swiper-slide item" onclick="setType(1,this)">供应</div>
        <div class="swiper-slide item" onclick="setType(2,this)">求购</div>
        <div class="swiper-slide item" onclick="setType(3,this)">商品</div>
        <div class="swiper-slide item" onclick="setType(4,this)">活动</div>
        <div class="swiper-slide item" onclick="setType(5,this)">合作</div>
    </div>
    <div class="search-box">
        <form action="">
        <input type="text" name="keywords" id="word" class="search_input" placeholder="请输入搜索关键词">
        <button class="search_btn" type="button" onclick="setWord()">
            <span class="iconfont icon-sousuo1"></span>
        </button>
        </form>
        <a href="javascript:;" class="cancel" id="cancel-search">取消</a>
    </div>
    <div class="search-icon" id="show-search">
        <span class="iconfont icon-sousuo1"></span>
    </div>
</div>
<div class="circleinfo-list" id="list">
    {empty name="circles"}
    <div class="weui-loadmore weui-loadmore_line">
        <span class="weui-loadmore__tips">暂无数据</span>
    </div>
    {/empty}
</div>
<!--<a href="javascript:;" class="iconfont icon-kefu service-icon"></a>-->
<div id="page"></div>
<!--评论框-->
<div style="
position: fixed;
width:100vw;
height:100vh;
z-index:9999999999999999;
top:0;
bottom:0;
left:0;
right:0;
background:#000;
opacity:0.7;display: none" id="shade"></div>
<div id="commentbox"  style="position: fixed;bottom: 0;z-index:99999999999999999;display: none">
    <input type="hidden" id="theme_id">
    <div id="editor" class="comment-textarea" contenteditable="true"></div>
    <a href="javascript:;" class="weui-btn weui-btn_primary submit-btn" onclick="sendReply()">发送</a>
</div>
{include file="public/footer"/}
{/block}
{block name='js'}
<script src="/public/plugins/swiper/js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.circle-info-type', {
        slidesPerView: 'auto',
        paginationClickable: true,
        spaceBetween: 0
    });
</script>
<script src="/public/plugins/dropload/dropload.min.js"></script>
<script src="/public/plugins/template/template.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/html" id="list-tpl">
    {{ each data as value index }}
    <div class="info-item">
        <div class="thumb">
            <a href="{:url('Public/memberCard')}?member_id={{ value.member_id}}">
            <img src="{{ value.member_avatar}}" alt="">
            </a>
        </div>
        <div class="infobox">
            <div class="name">
                <a href="{:url('Public/memberCard')}?member_id={{ value.member_id}}" class="name-link">{{ value.member_truename}}</a>
                {{ if value.is_top }} <span class="tag">圈主</span> {{ /if}}
                {{ if value.is_recommend }} <span class="tag">推荐</span> {{ /if}}
                {{ if value.member_id!='{$memberId}'}}
                <a href="javascript:;" class="action-icon">
                    <span class="iconfont icon-sanjiaojiantoutriangular"></span>
                </a>
                <div class="info-action">
                    <a href="javascript:;" class="link" onclick="setAttention('{{ value.theme_id}}',0,this)">
                        {{ if value.is_attention}}取消收藏 {{ else}} 收藏{{ /if}}
                    </a>
                    <a href="javascript:;" class="link" {{ if value.is_attention}} style="display: none" {{ /if}} onclick="setAttention('{{ value.theme_id}}',1,this)">屏蔽</a>
                    <a href="javascript:;" class="link" {{ if value.is_attention}} style="display: none" {{ /if}} onclick="setReport('{{ value.theme_id}}')">举报</a>
                </div>
                {{ /if}}
            </div>
            <div class="info-text">
                <a href="{:url('info')}?theme_id={{ value.theme_id}}" class="link"></a>
                <div class="text">{{ #value.theme_name}}</div>
                <a href="javascript:;" class="text-toggle">全文</a>
            </div>
            <div class="info-imgs">
                {{ each value.theme_image as v}}
                <img src="{{ v }}" alt="" data-text="{{ value.theme_name }}"  onclick="imgs(this)">
                {{ /each}}
            </div>
            <div class="info-after">
                <div class="date">{{ value.create_time}}&nbsp;&nbsp;</div>
                <div class="source">来自
                    <a onclick="setCircle('{{ value.circle_id}}')" class="link">
                        {{value.circle_name}}
                    </a>
                </div>
                {{ if value.member_id=='{$memberId}'}}
                <div class="source" style="float:right;margin-right:40px;">
                    <a onclick="del('{{ value.theme_id}}',this)" class="link">
                        <span class="iconfont icon-shanchu"></span>
                    </a>
                </div>
                {{ /if}}
                <div class="comment-action">
                    <a onclick="setLike('{{ value.theme_id}}')" class="link">
                        <img src="/public/home/bus/image/laud.jpg" alt="">赞
                    </a>
                    <a href="javascript:;" class="link link-comment" data-themeid="{{ value.theme_id}}">
                        <img src="/public/home/bus/image/comment.jpg" alt="">评论
                    </a>
                </div>
                <div class="comment-icon"></div>
            </div>
            <div class="info-comment" id="info-comment{{ value.theme_id}}" {{ if !value.like_list.length&&!value.reply.length}} style="display: none" {{ /if}}>
                <div class="laud-box" id="like{{ value.theme_id}}">
                    {{ if value.like_list.length}}
                    <img src="/public/home/bus/image/l.png" class="laud-icon" alt="">
                    {{ each value.like_list as v}}
                    <a href="" class="name-link">{{ v.member_name}}</a>，
                    {{ /each}}
                    ...
                    {{ /if}}
                </div>
                <div class="comtent-info" id="reply{{ value.theme_id}}">
                    {{ each value.reply as v}}
                    {{ if v.reply_replyid}}
                    <p><a href="{:url('Public/memberCard')}?member_id={{ v.member_id }}" class="name-link">{{ v.member_name}}</a><span class="name-reply"></span>回复
                        <a href="#{{ v.reply_replyid}}" class="name-link">{{ v.reply_replyname}}</a>
                        <span class="name-spill">：</span>{{ v.reply_content}}
                    </p>
                    {{ else}}
                    <p id="{{ v.replay_id}}"><a href="{:url('Public/memberCard')}?member_id={{ v.member_id }}" class="name-link">{{ v.member_name}}</a>
                        <span class="name-spill">：</span>{{ v.reply_content}}</p>
                    {{ /if}}
                    {{ /each}}
                    {{ if value.reply.length}}
                    <a href="{:url('info')}?theme_id={{ value.theme_id}}" class="toggle-text">查看详细</a>
                    {{ /if}}
                </div>
            </div>
        </div>
    </div>
    {{ /each}}
</script>
<script type="text/html" id="like-tpl">
    {{ if data.length}}
    <img src="/public/home/bus/image/l.png" class="laud-icon" alt="">
    {{ each data as v}}
    <a href="" class="name-link">{{ v.member_name}}</a>，
    {{ /each}}
    ...
    {{ /if}}
</script>
<script type="text/html" id="publish-tpl">
    <form id="publishForm">
        <div style="overflow-y: auto">
            <div class="weui-navbar">
                <div class="weui-navbar__item topbar">
                    <div style="float:left"><a href="javascript:;" onclick="layer.closeAll();"
                                               class="weui-btn weui-btn_mini weui-btn_default">返回</a></div>
                    <div style="float:right"><a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary"
                                                onclick="publish();">立即发布</a></div>
                </div>
            </div>
            <div class="weui-cells" style="margin-top:60px;">
                <div class="weui-cell weui-cell_select weui-cell_select-after">
                    <div class="weui-cell__hd">
                        <label class="weui-label">发布到</label>
                    </div>
                    <div class="weui-cell__bd">
                        <select class="weui-select" name="circle_id">
                            {{ each list }}
                            <option value="{{ $value.circle_id }}">{{ $value.circle_name }}</option>
                            {{ /each }}
                        </select>
                    </div>
                </div>
            </div>
            <div class="weui-cells" style="margin-top:4px;">
                <div class="weui-cell weui-cell_select weui-cell_select-after">
                    <div class="weui-cell__hd">
                        <label class="weui-label">主题类型</label>
                    </div>
                    <div class="weui-cell__bd">
                        <select class="weui-select" name="theme_type">
                            <option value="0">图文</option>
                            <option value="1">供应</option>
                            <option value="2">求购</option>
                            <option value="3">商品</option>
                            <option value="4">活动</option>
                            <option value="5">合作</option>
                        </select>
                    </div>
                </div>
            </div>
            <br>
            <div class="weui-cells weui-cells_form" style="margin-top:4px;">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <textarea class="weui-textarea" placeholder="请输入发布内容" name="theme_name" rows="3"></textarea>
                    </div>
                </div>
            </div>
            <div class="weui-cells weui-cells_form" style="margin-top:4px;">
                <input type="hidden" name="serverids" style="width:100%;" id="serverids"/>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <div class="weui-uploader">
                            <div class="weui-uploader__hd">
                                <p class="weui-uploader__title">图片上传</p>
                            </div>
                            <div class="weui-uploader__bd">
                                <ul class="weui-uploader__files" id="uploaderFiles"></ul>
                                <div class="weui-uploader__input-box" onclick="chooseImage()"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>
<script src="/public/home/bus/js/swiper.js"></script>
<script>
    $('#show-search').click(function () {
        $('.search-box').show();
    })
    $('#cancel-search').click(function () {
        $('.search-box').hide();
    })
    function imgs(obj) {
        var box=$(obj).parents('.info-imgs');
        var text=$(obj).data('text');
        var index=$(obj).index();
        console.log(index);
        var items=[];
        box.find('img').each(function () {
            var src= $(this).attr('src');
            items.push({
                image: src,
                caption: text
            })
        });
        var pb2 = $.photoBrowser({
            onOpen: function() {
                document.documentElement.style.overflow = "hidden";
            },
            onClose: function() {
                document.documentElement.style.overflow = "scroll";
            },
            items:items,
            initIndex:index
        });
        pb2.open();

    }
    function textToggle() {
        $('.text-toggle').each(function () {
            var obj = $(this).prev();
            if(obj.height()>110){
                obj.css('height',110);
                $(this).show();
            }
        })
    }
    /*上传图片begin*/
    wx.config({$options | json_encode});
    function chooseImage() {
        wx.chooseImage({
            count: 9, // 默认9
            sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                syncUpload(localIds);
            }
        });
    }
    var syncUpload = function (localIds) {
        var $length = $('#uploaderFiles>li').length;
        if ($length > 8) {
            $('.weui-uploader__input-box').hide();
            return false;
        } else {
            $('.weui-uploader__input-box').show();
        }
        var localId = localIds.pop();
        wx.uploadImage({
            localId: localId,
            isShowProgressTips: 1,
            success: function (res) {
                var serverId = res.serverId; // 返回图片的服务器端ID
                var html = '<li onclick="delImg(this)" data-serverid="' + serverId + '" class="weui-uploader__file" style="background-image:url(' + localId + ')"></li>';
                $('#uploaderFiles').append(html);
                $('#serverids').val(getServerIds());
                if (localIds.length > 0) {
                    syncUpload(localIds);
                }
            }
        });
    };
    function getServerIds() {
        var serverIds = [];
        $('#uploaderFiles li').each(function () {
            serverIds.push($(this).data('serverid'));
        });
        return serverIds.join(',');
    }
    function delImg(obj) {
        layer.open({
            content: '您确定要删除该图片吗？'
            , btn: ['确定', '取消']
            , yes: function (index) {
                $(obj).remove();
                $('#serverids').val(getServerIds());
                layer.close(index);
            }
        });
    }
    /*上传图片end*/
    function publish() {
        var loading = layer.open({type: 2});
        $.post("{:url('publish')}", $('#publishForm').serialize(), function (res) {
            layer.close(loading);
            if (res.code == 1) {
                layer.closeAll();
                setCircle(data.circle_id);
            } else {
                alert(res.msg);
            }
        });
    }
    var isLogin = "{$isLogin}";
    $(function () {
        $('.publish').click(function () {
            if (isLogin == 0) {
                location.href = "{:url('Public/userLogin')}?reback=" + window.location.href;
                return;
            }
            $.get("{:url('getMemberCircle')}", {circle_id: data.circle_id}, function (res) {
                if (res.list.length > 0) {
                    var html = template('publish-tpl', res);
                    layer.open({
                        type: 1
                        ,
                        content: html
                        ,
                        anim: 'up'
                        ,
                        style: 'position:fixed; left:0; top:0;bottom:0;overflow-y:scroll;overflow-x:hidden; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; background:#f4f4f4; animation-duration: .5s;'
                    });
                } else {
                    alert('您还未加入圈子!');
                }
            })
        });
        /*点击评论按钮操作*/
        $('#list').on('click', '.link-comment', function () {
            $("#theme_id").val($(this).data('themeid'));
            $('#shade').show();
            $("#commentbox").show();
            $("#editor").html('').focus();
            $('.mcm-foot').hide();
            document.documentElement.style.overflow = "hidden";
        });
        $("#shade").click(function () {
            resEdit();
        });
        var obj = $('.circleinfo-menu');
        var height = obj.offset();
        $(window).scroll(function () {
            $(".comment-action").hide();
            $(".info-action").hide();
            $('.screen-box').hide();
            var pos = $(window).scrollTop();
            if (pos > height) {
                obj.addClass('circleinfo-fixed');
            } else {
                obj.removeClass('circleinfo-fixed');
            }
        });
    });
    /*筛选内容*/
    $('#screen').click(function () {
        $('.screen-box').toggle();
    });
    /*点赞评论显示*/
    $("#list").on("click", '.comment-icon', function (e) {
        $('.comment-action').hide();
        var obj = $(this).prev();
        obj.toggle();
        $(document).one("click", function () {
            $(".comment-action").hide();
        });
        e.stopPropagation();
    });
    /*信息操作显示*/
    $('#list').on("click",".action-icon", function (e) {
        var obj = $(this).next();
        obj.toggle();
        $(document).one("click", function () {
            $(".info-action").hide();
        });
        e.stopPropagation();
    });
    // 页数
    var data = {
        page: 0,
        circle_id: '{$Request.param.circle_id|default=0}',
        member_id: '{$Request.param.member_id|default=0}',
        circle_ids:[],
        type:-1,
        word:''
    };
    // dropload
    var drop = $('.content').dropload({
        scrollArea: window,
        loadDownFn: function (me) {
            data.page++;
            // 拼接HTML
            var result = '';
            $.ajax({
                url: "{:url('index')}",
                data: data,
                success: function (res) {
                    if (data.page >= res.last_page) {
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    var html = template('list-tpl', res);
                    $('#list').append(html);
                    textToggle();
                    me.resetload();
                },
                error: function (xhr, type) {
                    layer.open({
                        content: '加载出错'
                        , skin: 'msg'
                        , time: 2 //2秒后自动关闭
                    });
                    // 锁定
                    me.lock();
                    // 无数据
                    me.noData();
                    me.resetload();
                }
            });
        }
    });
    function resDrop() {
        data.page=0;
        $('#list').empty();
        drop.noData(false);
        drop.unlock();
        drop.resetload();
    }
    function setCircle(circle_id) {
        data = {page: 0, circle_id: circle_id};
        resDrop();
    }
    function resComment(theme_id) {
        var likes=$('#like'+theme_id).children().length;
        var reply=$('#reply'+theme_id).children().length;
        if (likes||reply){
            $('#info-comment'+theme_id).show();
        }else {
            $('#info-comment'+theme_id).hide();
        }
    }
    $('#shade').bind("touchmove",function(e){
        e.preventDefault();
    });
    function resEdit() {
        var top_temp = $(document).scrollTop()||document.documentElement.scrollTop || document.body.scrollTop;
        window.parent.scrollTo(0,top_temp);document.documentElement.style.overflow = "scroll";
        $('#shade').hide();
        $("#commentbox").hide();
        $('.mcm-foot').show();
    }
    function setLike(theme_id) {
        $.post('{:url("setLike")}', {theme_id: theme_id}, function (res) {
            layer.open({
                content: res.msg
                , skin: 'msg'
                , time: 2 //2秒后自动关闭
            });
            if (res.code) {
                var html = template('like-tpl', res);
                $('#like' + theme_id).html(html);
                resComment(theme_id);
            }
        })
    }
    function sendReply() {
        var theme_id = $('#theme_id').val();
        var reply_content = $('#editor').html();
        $.post('{:url("replay")}', {theme_id: theme_id, reply_content: reply_content}, function (res) {
            layer.open({
                content: res.msg
                , skin: 'msg'
                , time: 2 //2秒后自动关闭
            });
            if (res.code) {
                resEdit();
                var html = "<p ><a href=\"javascript:;\" class=\"name-link\">" + res.data.member_name + "</a>\n" +
                    "<span class=\"name-spill\">：</span>" + res.data.reply_content + "</p>";
                $('#reply' + theme_id).prepend(html);
                resComment(theme_id);
            }
        })
    }
    function setType(type,obj) {
        data.type=type;
        $(obj).addClass('active').siblings().removeClass('active');
        resDrop();
    }
    function setCircles() {
        $('.screen-box').hide();
        var circlesForm=$('#circles').serializeArray();
        var values=[];
        for (var i in circlesForm){
            values.push(circlesForm[i]['value']);
        }
        data.circle_id=0;
        data.circle_ids=values;
        resDrop();
    }
    function setAttention(theme_id, type,obj) {
        $.post('{:url("attention")}',{theme_id:theme_id,type:type},function (res) {
            layer.open({
                content: res.msg
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
            if (res.code){
                if (type){
                    $(obj).parents('div.info-item').fadeTo("slow", 0.01, function(){
                        $(this).slideUp("slow", function() {
                            $(this).remove();
                        });
                    });
                }else {
                    var text=$(obj).text();
                    $(obj).text(text=='取消收藏'?'收藏':'取消收藏').nextAll().toggle();
                }
            }
        })
    }
    function del(theme_id, obj) {
        layer.open({
            content: '您确定要删除本条消息吗？'
            ,btn: ['确定', '取消']
            ,yes: function(index){
                $.post('{:url("del")}',{theme_id:theme_id},function (res) {
                    if (res.code){
                        layer.closeAll();
                        $(obj).parents('div.info-item').fadeTo("slow", 0.01, function(){
                            $(this).slideUp("slow", function() {
                                $(this).remove();
                            });
                        });
                    }else {
                        layer.open({
                            content: res.msg
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                    }
                })
            }
        });
    }
    function setReport(theme_id) {
        layer.open({
            content: '<div class="weui-cells weui-cells_form">\n' +
            '  <div class="weui-cell">\n' +
            '    <div class="weui-cell__bd">\n' +
            '     <select class="weui-select" id="msg" pattern="*">\n' +
            '            <option value="恶意垃圾营销">恶意垃圾营销</option>\n' +
            '            <option value="淫秽色情信息">淫秽色情信息</option>\n' +
            '            <option value="有害违法信息">有害违法信息</option>\n' +
            '            <option value="人身攻击">人身攻击</option>\n' +
            '            <option value="涉及版权专利抄袭等">涉及版权专利抄袭等</option>\n' +
            '          </select>\n' +
            '    </div>\n' +
            '  </div>' +
            '</div>'
            ,btn: '举报'
            ,yes:function () {
                var msg=$('#msg').val();
                $.post('{:url("report")}',{theme_id:theme_id,msg:msg},function (res) {
                    layer.open({
                        content: res.msg
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                })
            }
        });
    }
    function setWord() {
        data.word=$('#word').val();
        data.page=0;
        resDrop();
    }
</script>
{/block}